<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<title>项目</title>
<script type="text/javascript" src="./js/3.1.1.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<style>
  *{
    padding: 0;
    margin: 0;
    transition: width 0.6s,height 0.6s,background-color 0.6s, border-color 0.6s;
    -moz-transition: width 0.6s,height 0.6s,background-color 0.6s, border-color 0.6s;
    -webkit-transition: width 0.6s,height 0.6s,background-color 0.6s, border-color 0.6s;
    -o-transition: width 0.6s,height 0.6s,background-color 0.6s, border-color 0.6s;
  }
  ul{list-style:none;}
  body{background-color: #f3f3f3;padding: 0;margin: 0;font-size: 24px;}
  body a{text-decoration:none;}
  header{
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 60px;
    background-color: #fff;
    overflow: hidden;
  }
  header a{
    position: absolute;
    z-index: 2;
    color:#3677f7;
  }
  header h1 {position: relative;z-index: 1;text-align: center;font-size: 1em; font-weight:normal;}
  header *{
    display: block;
    padding: 0;
    margin: 0;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
  }


  section{
    padding: 80px 10px 0;
  }
  section dl dd{padding: 10px 0;}
  section dl dd .input{width: 96%; padding: 0 2%;height: 42px; border:1px solid #999;font-size: 0.8em;}
  section dl dd .button{width: 100%; padding: 10px 0;border:1px solid #3677f7;color:#fff;background-color: #3677f7;font-size: 0.8em;}
  section dl dd ul{overflow:visible; overflow:auto; zoom:1;}
  section dl dd ul li{
    float: left;
    font-size: 0.8em;
    padding: 4px 6px;
    border:1px solid #999;
    background-color: #fff;
    font-size: 0.8em;

  }
  section dl dd ul li.selected{border-color: #f60;color:#f60;}
  section dl dd ul li:not(:first-child){margin-left: 5px;}

  section dl dd.zs{font-size: 0.5em; text-align: center;}
  section dl dd.zs a{color:#3677f7; }

  .yaun{-moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px;}
</style>
</head>
<body>
  <header>
    <a style="left:10px;" href="#"><</a>
    <h1>充值</h1>
  </header>
  <section>
    <dl>
        <dd><input id="sj" class="yaun input" type="text" placeholder="请输入充值手机号码" />13761044556</dd>
        <dd><input id="je" class="yaun input" type="number" placeholder="请 选择/输入 充值金额" /></dd>
        <dd>
          <ul id="jex">
              <li class="yaun">100</li>
              <li class="yaun">200</li>
              <li class="yaun">500</li>
              <li class="yaun">800</li>
              <li class="yaun">1000</li>
          </ul>
        </dd>
        <dd><input class="yaun button" onclick="createOrder()" type="button" value="确认充值"/></dd>
        <dd class="zs">充值代表同意<a href="#">用户协议</a></dd>
    </dl>
  </section>
  <script>
  $(function(){
    $("#jex>li").on("click", function(){
      $("#jex>li.selected").removeClass("selected");
      $("#je").val($(this).addClass("selected").text());
    });
  });
  </script>
  <script type="text/javascript" src="js/common.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
		<script type="text/javascript" src="js/recharge.js" ></script>
			
</body>
</html>
